<template>
  <div id="liveGoods">
    <div class="title titone">商品列表</div>
    <div v-if="$store.state.userRoot[6][35].owner">
      <div class="nums box">
        <div class="goods" v-if="proList">
          <div class="good1">
            <p>商品(件)</p>
            <span>{{ format_num(count) }}</span>
          </div>
          <div class="good2">
            <p>累计销量</p>
            <span>{{ format_num(volume) }}</span>
          </div>
          <div class="good3">
            <p>累计销售额</p>
            <span>{{ format_num(amount) }}</span>
          </div>
        </div>
      </div>
      <!-- 搜索框 -->
      <div class="searchBox box">
        <input type="text" v-model.trim="keyword" placeholder="请输入商品关键词搜索" @keyup.enter="toSearch" />
        <!-- <div class="imgBox"
             @click="toSearch"
        v-if="!imgBox">-->
        <img src="@/assets/one/seach.png" v-if="!imgBox" @click="toSearch" />
        <!-- </div> -->
        <!-- <div class="imgBox"
             @click="toSearch"
        v-if="imgBox">-->
        <img src="@/assets/two/search.png" v-if="imgBox" @click="toSearch" />
        <!-- </div> -->
      </div>
      <!-- 商品列表 -->
      <div v-if="proList.length != 0" class="bgbox_prodlist">
        <div
          class="prodlist box"
          v-for="(item, index) in proList"
          :key="'a' + index"
          @click="toGoodsDetails(item.proId, '0')"
        >
          <div class="titimg">
            <img :src="item.proLogo" />
            <p>{{ item.proTitle }}</p>
          </div>
          <div class="pronum">
            <p>
              <span>{{ item.livePrice+(item.maxPrice?'-'+item.maxPrice:'') }}</span>直播价
            </p>
            <p>
              <span>{{ format_num(item.volume) }}</span>销量
            </p>
            <p>
              <span>{{ format_num(item.amount) }}</span>销售额
            </p>
          </div>
        </div>
        <div class="more" @click="addcount" v-if="!isOver && proList.length != 0 && !loading">查看更多</div>
      </div>
      <div v-if="loading" style="margin-top: 1rem;">
        <van-loading class="loading" v-if="loading" type="spinner" :vertical="true" />
      </div>
      <div class="zanwu" v-if="proList.length == 0 && !loading">
        <img src="@/assets/three/noData.png" />
        <p>暂无数据</p>
      </div>
      <p class="bott" v-if="isOver && proList.length != 0">我是有底线的~</p>
      <!-- <div v-if="loading" class="blank_holder"></div> -->
    </div>

    <!-- <noPower v-else :bg="'https://sf6-ttcdn-tos.pstatp.com/img/temai/e2797a315ea86dd81f757246ad696efedbb5263dwww800-800~tplv-resize:200:0.jpeg'" /> -->
    <noPower :minLeve="$store.state.userRoot[6][35].ownerMinLevel" v-else />
    <div class="botto"></div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      count: 0, //分页页数
      volume: 0, //累计销量
      amount: 0, //累计销售额
      page: 1,
      proId: '',
      loading1: null,
      busy: false,
      proList: [], //商品列表
      keyword: '',
      isOver: false,
      imgBox: false,
      loading: false,
      hasRoot: true,
      isshow: true
    };
  },
  watch: {
    // 搜索
    keyword: function (newVal, oldVal) {
      if (newVal == '') {
        this.imgBox = false;
        this.proList = [];
        this.page = 1;
        this.isOver = false;
        this.getProList();
      } else {
        this.imgBox = true;
      }
    }
  },
  created() {
    this.getProList();
  },
  mounted() {},
  methods: {
    //   搜索
    toSearch() {
      this.proList = [];
      this.page = 1;
      this.loading = true;
      this.getProList();
    },
    // 失去焦点和得到焦点的验证方法，name为要验证的字段名,type为blur或focus
    animateWidth(name, type) {
      if (name == 'company_name') {
        if (type == 'blur') {
          this.imgBox = false;
        } else {
          this.imgBox = true;
        }
      }
    },

    // 商品列表
    getProList() {
      let that = this;
      that.loading = true;
      that.$axios
        .post('/api/live/prosearch1', {
          roomId: that.$route.query.room_id,
          proIds: '',
          proCateId: 0,
          shopId: 0,
          shopIds: '',
          key: this.trimStr(that.keyword),
          page: that.page, //页数
          size: 10,
          brandId: ' ',
          // sort: 'Volume', //销量=Volume，销量额=Amount
          sort: 'Volume',
          sortType: 2
        })
        .then(res => {
          if (res.data.code == 0) {
            this.loading = false;
            that.proList = that.proList.concat(res.data.data.data);
            this.count = res.data.count;
            this.volume = res.data.data.volume;
            this.amount = res.data.data.amount;
            this.proId = res.data.data.proId;
            res.data.data.length < 20 ? (that.busy = true) : (that.busy = false);
            that.loading1 = false;
            if (that.proList.length >= this.count) {
              this.isOver = true;
            }
          } else if (res.data.code == 1002) {
            that.loading = false;
          } else if (res.data.code == 1003) {
            this.isshow = false;
          } else {
            that.busy = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    addcount() {
      this.page = this.page + 1;
      this.getProList();
    },
    // 跳商品详情
    toGoodsDetails(id, tabNo) {
      this.$router.push({
        path: '/goodsDetailsMain',
        query: { id }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.botto {
  width: 100%;
  height: 0.36rem;
  background-color: #f1f1f1;
}
#liveGoods {
  .box {
    width: 9.2rem;
    margin: 0 auto;
  }
  .titone {
    margin: 0.6933rem 0.4rem 0;
  }
  .title {
    font-size: 0.4rem;
    color: #222222;
    padding-left: 0.2rem;
    padding-bottom: 0.4rem;
    font-weight: 600;
    position: relative;
  }
  .title::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0.1rem;
    display: inline-block;
    width: 0.08rem;
    height: 0.3733rem;
    background-color: #fd7f2c;
    border-radius: 0.1333rem;
  }
  .nums {
    // padding-top: 0.6933rem;

    .goods {
      display: flex;
      flex-wrap: wrap;
      > div {
        display: flex;
        justify-content: space-between;
        width: 4.4533rem;
        line-height: 0.9333rem;
        background: #f5f5f5;
        padding: 0 0.4rem;
        box-sizing: border-box;
        border-radius: 0.1333rem;
        font-size: 0.3733rem;
        color: #888;
        span {
          font-size: 0.3733rem;
          letter-spacing: 0.0133rem;
          color: #222;
          font-family: Dinpro-medium;
        }
      }
      .good1 {
        margin-right: 0.2667rem;
        margin-bottom: 0.2667rem;
      }
      .good2 {
        margin-bottom: 0.2667rem;
      }
      .good3 {
        margin-bottom: 0.4rem;
      }
    }
  }
  /* 搜索框 */
  .searchBox {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-radius: 0.1333rem;
    border: solid 1px #e5e5e5;
    width: 9.2rem;
    height: 0.986667rem;
    padding-left: 0.5rem;
    input[type='text'] {
      width: 86%;
      height: 100%;
      border: none;
      font-size: 0.3733rem;
      color: #222;
    }
    input {
      //处理ios兼容性(阴影)
      -webkit-appearance: none;
    }
    img {
      width: 0.4rem;
      height: 0.4rem;
      margin-left: 0.4rem;
    }
  }
  //   商品列表
  .bgbox_prodlist {
    padding-bottom: 0.33rem;
  }
  .prodlist {
    border-bottom: 1px solid #e5e5e5;
  }
  .titimg {
    display: flex;
    padding: 0.4rem 0;
    img {
      display: block;
      width: 1.3333rem;
      height: 1.3333rem;
      border-radius: 0.2667rem;
      border: 1px solid #e5e5e5;
      margin-right: 0.2667rem;
    }
    p {
      width: 7.5467rem;
      font-size: 0.4rem;
      line-height: 0.5067rem;
      padding: 0.16rem 0;
      color: #222222;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      vertical-align: middle;
      -ms-flex-item-align: center;
      align-self: center;
    }
    p:active {
      color: #ff924b;
    }
  }
  .pronum {
    display: flex;
    justify-content: space-around;
    p {
      padding-top: 0.1867rem;
      padding-bottom: 0.4rem;
      font-size: 0.32rem;
      color: #888888;
      text-align: center;
      span {
        display: block;
        font-size: 0.4rem;
        color: #222222;
        text-align: center;
        font-family: DINPro-Medium;
      }
    }
  }
  //   查看更多
  .more {
    margin: 0.6667rem auto 0 auto;
    width: 2.1333rem;
    height: 0.8rem;
    line-height: 0.8rem;
    border-radius: 0.1333rem;
    border: solid 1px #fd7f2c;
    font-size: 0.3467rem;
    color: #fd7f2c;
    text-align: center;
  }
  .bott {
    width: 100%;
    font-size: 0.32rem;
    color: #b5b5b5;
    text-align: center;
    padding: 0 0 0.4rem 0;
  }
  //   暂无数据
  .zanwu {
    width: 5.3333rem;
    height: 4rem;
    margin: 1rem auto 0 auto;
    img {
      margin: 0 auto;
      width: 4rem;
      height: 3.2rem;
      display: block;
    }
    p {
      font-size: 0.3467rem;
      line-height: 0.4rem;
      color: #888;
      text-align: center;
    }
  }
}
</style>
